<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>快剪布局</title>
    <style>
        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        *  {
          box-sizing: border-box;  
        }
    </style>
    <style>
        .container {
            height: 100%;
        }
        .header {
            width: 100%;
            height: 60px;
            color: #fff;
            line-height: 60px;
            font-size: 16px;
            padding-left: 16px;
            background-color: #003d77;
        }
        .content-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            height: calc(100% - 60px);
        }
        .middle {
            background-color: #081625;
            /* height: 480px; */
            /* height: 52.74%; */
            flex: 52;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bottom {
            background-color: #13192b;
            border-top: 1px solid #0e2745;
            /* height: 430px; */
            /* height: 47.25%; */
            flex: 48;
            display: flex;
            justify-content: center;
            /* align-items: center; */
            padding-top: 20px;
        }
        .player {
            /* width: 45%;
            margin: 279px; */
            /* height: 257px; */
            position: relative;
            /* max-height: calc(100% - 6.25%); */
            background-color: #000;
        }
        .operation {
            height: 280px;
            width: 74%;
            background-color: #062444;
            border: 1px solid #092e53;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">视频快剪</div>
        <div class="content-wrap">
            <div class="middle">
                <div class="player">
                </div>
            </div>
            <div class="bottom">
                <div class="operation"></div>
            </div>
        </div>
    </div>

    <script>
        window.onresize = function () {
            setPlayerSize()
        }

        var middle = document.querySelector('.middle')
        var player = document.querySelector('.player')

        function setPlayerSize () {
            var mw = middle.clientWidth
            var mh = middle.clientHeight
            var padding = 20

            var maxw = mw - padding * 2
            var maxh = mh - padding * 2

            var width = maxw
            var height = maxh
            var ratio = 0.5625

            if (maxh / maxw > ratio) {
                height = width * ratio
            } else {
                width = height / 0.5625
            }

            player.style.width = width + 'px'
            player.style.height = height + 'px'
        }

        setPlayerSize()
    </script>
</body>
</html> 